\subsection{Introduction}
\label{introimplementationWeb}
This section describes the implementation for the Web site application. The Web site application was implemented 
mainly in PHP5 and standard HTML, with the help of Javascripts, CSS and AJAX. The Web site will be capable of running
on known Internet web browsers like Google Chrome and Firefox. 

\subsection{Structure of the Web site files}
\label{structFilesmplementationWeb}
The structure of the Web site files were implemented in a very easy and intuitive way so as the future developers can easily
maintain and develop it as well. The structure of the files that consist the Web page is shown graphically below in 
\emph{ Figure \ref{webFolderImpl}}.

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{WebSite/Implementation/images/webfolderImplementation.png} 
\caption{Folder structure of the Web site}
\label{webFolderImpl}
\end{figure}

The folder \emph{action} contains files that have to do with the actions that are made like the login, check if a nick already 
exists and the creation of a user. The folder \emph{homePage} has files that have to do mainly with the structure of the home 
page and what has to be shown. In folder \emph{content} are files that show the different pages after the user makes an action 
in the home page, like watching all the users in a table, changing account information or watching their positions displayed in 
a map. The folder \emph{pictures} contains some needed pictures. The folder \emph{js} has a javascript file, which is needed so 
as to implement AJAX. The folder \emph{style} has CSS files so as to structure and design the Web site easily. Finally folder 
\emph{webservices} has files that help us to connect and use the Web services. In the next subsections is going to be explained 
how all these files are connected together and how the Web site application works.

\subsection{Consuming Web services}
\label{consumeServicesImplementationWeb}
The project team has decided to use Web services because it was needed interoperability across heterogeneous platforms, in our 
case Android application and Web site application. In the implementation of the Web site, PHP was used for Web services 
communication and transactions. The method that was used for communication with Web services is the SOAP protocol. So as to 
handle this protocol and to add SOAP functionality into PHP was used the nuSOAP package.

Because we had complex types that had to map the Objects with Web services we implemented three PHP classes:
\begin{enumerate}
 \item \emph{Auth} : Which is needed for authentication, and it has getters and setters methods so as to access it's attributes.
 \item \emph{UserInfo} : Which is needed for user's information and it also has getters and setters methods.
 \item \emph{Position} : Which is needed for user's position in a map and it has getters and setters methods.
\end{enumerate}
 
The most important file that gives us the ability to consume the Web services is the \emph{toServer.php} file. This file 
requires the \emph{nuSOAP.php} file, defines the path to the server application and does the mapping for complex types, which 
were referred earlier. Finally, creates the client object and then makes the call to the service. You can see an example in 
\emph{Listing \ref{exampleExistsServiceWeb}} how one of the ToServer functions is implemented, especially this function checks 
if a nickname already exists and returns true if it exists otherwise returns false.
\clearpage

\begin{lstlisting}[captionpos=b,label=exampleExistsServiceWeb, caption={\textit{Function exists() in class ToServer}},
language=PHP, basicstyle=\small, frame=single]

/**
  Requires the files that needs so as to implement 
  the functions.
*/
// include the SOAP classes
require_once('/usr/share/php/nusoap/nusoap.php'); 

require_once('auth.php');
require_once('userinfo.php');
...
// define path to server application
private $wsdl='http://192.168.2.3:8080/fflServer/wsdl
				  /FFLocationAPI.wsdl'; 

public function exists($nick){
      $classmap = array('Auth' => 'Auth','UserInfo' => 
					 'UserInfo');
      $features = array( 'classmap' => $classmap);
      try{
	    //creation of client object 
	    $client = new soapclient($this->
				wsdl,$features); 
	    $param=array('nick' => $nick);
	    //call to the service
	    $response = $client->exists($param); 
	    return $response->existsReturn;
      }
      catch (SoapFault $fault) {  
	    return;
      }
}
\end{lstlisting}

The calls for the Web service are made for:
\begin{enumerate}
 \item User's login, which logins the user, by checking for authentication.
 \item User's information.
 \item User's friend previous positions.
 \item Checking if a user nickname exists.
 \item Common user's friends.
 \item Searching a user by name, nickname, surname and/or country.
 \item Returning all user's of the system.
 \item Creating new user.
 \item Creating new administrator.
 \item Deleting a user.
 \item And changing user account information.
\end{enumerate}

\subsection{Web site design}
HTML alone is not able to make the design of the Web site simple. That is why we implemented two CSS files, that are in folder
\emph{style}, for making the design easier friendly and fresh. Also, by using the CSS the whole Web site is more consistent 
which means that is easy to maintain, handle and control. These files are called in the \emph{head} of the HTML files, and 
we include them in file \emph{login.html}, which is the login page, and in the \emph{home.inc.php}, which is the Home Page 
for the user.

\subsection{Implementation of the web pages}
After having referred to the structure of the Web site, the consumption of the Web services and the Web site's design, now we 
are going to explain how the Web pages are implemented and how they are linked with each other. So as the reader of this 
report understand easier this structure, in \emph {Figure \ref{userFlowChartImpl}} and \emph {Figure \ref{adminFlowChartImpl}} 
are shown the Flow Chart diagrams for the common user and administrator respectively.

\begin{figure}[ht]
\centering
\includegraphics[width=0.9\textwidth]{WebSite/Implementation/images/webUserFlowChart.png} 
\caption{Flow Chart diagram for the common user}
\label{userFlowChartImpl}
\end{figure}

\begin{figure}[ht]
\centering
\includegraphics[width=0.9\textwidth]{WebSite/Implementation/images/webAdministratorFlowChart.png} 
\caption{Flow Chart diagram for the administrator}
\label{adminFlowChartImpl}
\end{figure}
 
\clearpage
\subsubsection{A main file}
"Behind the scenes" the file \emph{index.php} does all the work needed so as the Web site to be consistent. This file is 
actually called first when the user visits the Web site. After being called, it requires some important files such as the 
\emph{toServer.php} which was explained earlier, \emph{login.inc.php}, \emph{newUserAction.inc.php} and 
\emph{newAdminAction.inc.php} which are going to be explained in this section; in this way they do not have to be required 
again from any other file. This file stores a new session for each user. The user will be redirected to the login page 
because the session which holds his nickname it will not be set. After the user fills the login form, the nick session is 
going to be set so he is going to be redirected to his \emph{Home Page}. Finally, it checks if the user who has been 
logged in is inactive for more than a specific time, if this happens then it destroys his session and it redirects him to 
the login page. In \emph{Listing \ref{inactivelogoutWeb}} is shown this last action.

\begin{lstlisting}[captionpos=b,label=inactivelogoutWeb, caption={\textit{Destroying the session of an inactive user}},
language=PHP, basicstyle=\small, frame=single]

// check to see if $_SESSION['timeout'] is set
if(isset($_SESSION['timeout']) ) {
      $session_life = time() - 
			  $_SESSION['timeout'];
      if($session_life > $inactive) { 
      //if the session was inactive then it's 
      //destroyed and the user is sent to login 
      //page finally, because there is not going 
      //to be any session to keep the information 
      //for the user.

	  session_destroy(); //destroy the session
	  header("Location: index.php"); 	    
      }
}
//sets $_SESSION['timeout'] equals to current time;
$_SESSION['timeout'] = time();

\end{lstlisting}

\subsubsection{Login page}
\label{loginImplWeb}
\textbf{Introduction:} The login page is the same for the common user and the administrator, and gives the ability to login or 
create a new account.

\textbf{Implementation details:} The page is written in standard HTML which also uses AJAX technology. AJAX is used so as to
check if a user nickname already exists when a new user tries to create a new account. If it exists then, without reloading the 
whole page, the form in the nickname is going to be red, otherwise is going to be green. In fact, this happens with the help of
the Javascript file \emph{exists.js}, which has a function to create an XMLHttpRequest object for asynchronous communication. 
Also, there is a function that makes a \emph{question} to the server if the nickname exists, and finally a function which 
responds to this question and changes the colour. In \emph{Listing \ref{AJAXJavascriptWeb}} is shown the \emph{answer} of the 
server and how it reacts to the different answers.

\begin{lstlisting}[captionpos=b,label=AJAXJavascriptWeb, caption={\textit{Function answer() in the file exists.js.}},
language=php, basicstyle=\small, frame=single]

function answer() {
  //request finished and response is ready
  if (xmlrobject.readyState == 4) { 
    if (xmlrobject.status == 200) { 
      // is "OK", otherwise some error code is 
      //returned, 404 for example.
      //If the response from the server is XML, 
      //and you want to parse it as an XML object, 
      //then use the responseXML property

      // Assign the XML file to a var
      var xml = xmlrobject.responseXML; 
      var root = xml.documentElement;
      var r=root.getElementsByTagName("exists")[0].
	 firstChild.data; // Read the first element
      var div = document.getElementById("exists");
      if(r=='yes'){
	    div.setAttribute('bgcolor','red');    
      }else{
	    div.setAttribute('bgcolor','green');
      };
    
    };
  };
};
\end{lstlisting}

As it was mentioned earlier the user has two options in the login page:
\begin{enumerate}
 \item Fill the login form and press the login button. A PHP file \emph{login.inc.php} is called, which creates a ToServer 
  object and then calls the login function. If he logs in then his nickname is stored in a session. In addition, this file 
  checks whether the button for logout is pressed, if yes then destroys the session and redirects the user to login page. 
  See \emph{Listing \ref{createaccountImplWeb}}.
\item Fill the new common user account form and press the \emph{sign up} button. A PHP file \emph{newUserAction.inc.php} is 
  called, which creates an object of type UserInfo so as to store the user's account information, creates another object of 
  type ToServer and tries to make a new user account. If it succeeds then the user logs in automatically to his Home Page.
\end{enumerate} 

\begin{lstlisting}[captionpos=b,label=createaccountImplWeb, caption={\textit{Creating a new account.}},
language=PHP, basicstyle=\small, frame=single]

//creation of the ToServer object.
$_SESSION['userID'] = new ToServer(); 
    // Checks if user with the same "nick" 
    //alreay exists if not then creates the user 
    //and logins to the application
 if(!$_SESSION['userID']->exists($_POST['nick'])){  
    
    // creation of the new User' account
    $_SESSION['userID']->newUser($nu, $_POST['pw']); 
	
    if( $_SESSION['userID']->logged() ){ 
	  // store the nick to this SESSION
	  $_SESSION['nick'] = $_POST['nick']; 
	  //javascript which shows an alert message 
	  //that the account has been created
	  echo '<script language=javascript>alert(
	"Your account has been created!.")</script>';
    }
      ...
\end{lstlisting}

\textbf{Error Handling:}
\begin{enumerate}
\item When a user tries to login with invalid nickname or password, or he does not fill both fields then an alert message, 
  implemented with Javascript, will inform him that an error occurred.
\item When a new user creates a new account, if he does not fill both nickname and password fields and they are not greater 
  than 2 and 3 characters respectively, an alert message will inform him that he has to fill correctly these fields.
\item If the user tries to create an account with an existing nickname again an alert message will inform him that the user 
  nickname already exists.
\item If the server, which runs the Web services that are consumed by the Web site, is not available then the system will show 
  an error message.
\end{enumerate}

\subsubsection{Home page}
\textbf{Introduction:} The home page is the same for the common user and the administrator, it shows some information about the
\emph{Find Friend Location}. In the left side will be the actions that the user can make, if they are pressed, the content of 
the page is going to change as it is shown in \emph{Section \ref{webstoryboards}}.

\textbf{Implementation details:} The page is written in HTML combined with PHP code. The main idea is to have the actions as 
links to the other "pages" that are going to be shown in the right part. After a link is pressed a variable is going to take a 
specific value, different for each link. Depending on this value the right PHP file from folder \emph{content} will be required, 
and it will be displayed in the screen. Also in the left side there is a \emph{logout} button which logs out the user, and 
returns him to the login page. Also the page contains a script tag pointing to URL \emph{http://maps.google.com/maps/api/js}, 
which points to the location of a JavaScript file that loads all symbols and definitions needed for using v3 of the Google 
Maps API.

\textbf{Error Handling:}
\begin{enumerate}
 \item If the server is not available, the system will show an error message.
\end{enumerate}

\subsubsection{Show users/friends position}
\label{userlastpositionImlWeb}
\textbf{Introduction:} Because the \emph{Show users position}  and \emph{Show friends position} actions, for administrator and 
common user respectively, are calling the same file \emph{googleMapPositions.inc.php} we decided to explain them together. 
This page shows the positions of the users in a Google Map, displayed in markers. 

\textbf{Implementation details:} This file is practically a Javascript which is needed so as to create a Map Object and display 
it on the screen. Because it was needed to show the markers with the users positions we decided to embed PHP code inside the 
Javascript. First of all, to initialise a Map, we create a Map options object to contain map initialisation variables and we 
define a single map on the page. Then we use markers to identify users locations on the map. For more information how to 
implement Google Maps JavaScript API V3 visit \emph{\cite{googleMapsURL}}. Below in \emph{Listing \ref{GMapMarkerWeb}}
is shown how the friends are shown in markers.
\clearpage

\begin{lstlisting}[captionpos=b,label=GMapMarkerWeb, caption={\textit{Showing markers in a map}},
language=PHP, basicstyle=\small, frame=single]

function initialize() {
  var latlng = new google.maps.LatLng(55.65734340292977, 
				      12.5518798828125);	        
  //creating a Map options object to contain map 
  //initialization variables.
  var myOptions = {zoom: 8,center: latlng, mapTypeId: 
   google.maps.MapTypeId.ROADMAP};//creating a single Map.
  var map = new google.maps.Map(document.getElementById
			      ("map_canvas"),myOptions);
  <?php
      ...
      $lastpositions = $_SESSION['userID']->getPositions
				($_POST['id_history'],10);
      $array_length = count($lastpositions);;
      if( $array_length != 0 ){
	for( $i = 0; $i < $array_length; $i++ ) {  
	  // creating a marker in the user's position
	  echo ' var marker = new google.maps.Marker({ 
		  animation: google.maps.Animation.DROP,
		  position: new google.maps.LatLng(';
	  echo $lastpositions[$i]->getLatitude();
	  echo ',';
	  echo $lastpositions[$i]->getLongitude();
	  echo '), title:"';
	  echo $lastpositions[$i]->getDate();
	  echo '"});
	  marker.setMap(map);';   
	}
      }
\end{lstlisting}

So as to get users or friends last position, we call the functions for getting all users or all friends from class ToServer. 
Then we just call the methods for taking their last position from the \emph{UserInfo} class. If the common user or administrator 
wants to see a friend's or user's history respectively, then calls the function for getting his previous positions from class 
ToServer. The last action will be called when the user will press the button \emph{History}, in the Web site. So as to load 
the map and display it, we must execute the function which constructs the Map object once the \textless body\textgreater 
element of the HTML page receives an onload event. This is done in the \emph{Home page} which is the main page of the Web site, 
and practically the only one as the others are embedded in this and they are called when an action is made.
\clearpage

\textbf{Error Handling:}
\begin{enumerate}
 \item If a failure occurs while loading the map, it is not going to be displayed on the page.
 \item If the server is not available, the system will show an error message.
\end{enumerate}

\subsubsection{Show all users/friends}
\label{showAllFUImplWeb}
\textbf{Introduction:} Because the \emph{Show all users}  and \emph{Show all friends} actions, for administrator and common user 
respectively, are calling the same file \emph{showAllUsersTable.inc.php} we decided to explain them together. This page shows 
all the friends or users in a table where the user can make actions, like watching one user's account information and his 
history of previous positions displayed in a map.

\textbf{Implementation details:} The file is written in HTML combined with PHP code. It checks if the user is an administrator 
or not. If he is then calls the function \emph{getUsers}, which returns all the users of the system (including other 
administrators), from the class ToServer, otherwise calls the function \emph{getFriendsPage}, which returns all the friends of 
the common user, and stores them in a session array because they will be needed for later actions. So as to implement the 
\emph{Next} and \emph{Previous} buttons, as described in \emph{Subsection \ref{showFriendsUsersWeb}}, we save in a variable 
the current page number (which increases or decreases if the \emph{Next} or \emph{Previous} button is pressed, respectively) 
and we send it in the URL, so as to make these actions depending on the page's number.

Furthermore, as it was mentioned earlier a logged user can see a user's infomation, by pressing the \emph{Info} button. After 
pressing it the PHP file \emph{showFriendUserAccount.inc.php} will be called. This file checks the session array, in which were 
stored users and tries to find the selected user to show his account. Then it shows the account information of the selected user 
by calling the getter methods from the class UserInfo. If the user presses the \emph{History} button which shows the user's 
history of previous positions the PHP file \emph{googleMapPositions.inc.php} is called, which was explained earlier in 
\emph{Subsection \ref{userlastpositionImlWeb}}.

\textbf{Error Handling:}
\begin{enumerate}
 \item If a failure occurs while loading the map, it is not going to be shown on the page.
 \item If the server is not available the system will show an error message.
\end{enumerate}

\subsubsection{Show/Change account}
\textbf{Introduction:} The \emph{Show/Change account} action, is the same for administrator and common user. This page shows the
account information of the user and gives him the ability to change his account information if he wants.

\textbf{Implementation details:} The page is written in HTML combined with PHP code. First of all it stores the user's account
information in a variable and then it shows them in a table by calling the getter methods from the UserInfo class. The user also
has the ability to change his account information, so the table is implemented by containing forms. The nickname form disabled, 
because the user cannot change his nickname. If he presses the \emph{Submit} button then the file \emph{submitChanges.inc.php} 
will be called. This file calls the setter methods of the class UserInfo, so as to change his account, and then calls the 
\emph{changeUser} function of class ToServer, so as to call the service that modifies his account. A message that the submit  
was successful is shown to the user. If the button \emph{Back} is pressed then the modifications will not be stored and he will 
return to his \emph{Home Page}.

\textbf{Error Handling:}
\begin{enumerate}
\item When a user modifies his account, if he changes his password and it is not greater than 3 characters an alert message will 
inform him that he has to fill correctly the password field.
\item If the server is not available the system will show an error message.
\end{enumerate}

\subsubsection{Create new admin}
\textbf{Introduction:} Only the administrator can \emph{create a new administrator}. This page shows a form where the 
administrator is able fill it by entering the new administrator's account information.

\textbf{Implementation details:} The page is written in HTML, but also the AJAX technology is used here for the same reason 
was used in \emph{Subsection \ref{loginImplWeb}}. If he presses the \emph{Create admin} button the PHP file 
\emph{newAdminAction.inc.php} will be called. This file creates an object of type UserInfo so as to store the new account 
by calling its getter methods, and finally calls the \emph{NewAdmin} function of the class ToServer so as to call the service 
which creates the account. Finally, an alert message will inform him that the creation of the new account was successful.
\clearpage

\textbf{Error Handling:}
\begin{enumerate}
\item When both nickname and password fields are not filled and they are not greater than 2 and 3 characters respectively, an 
      alert message will state that these fields are not correctly filled.
\item If it is tried to create an account with an existing nickname an alert message will state that user nick already exists.
\item If the server is not available the system will show an error message.
\end{enumerate}

\subsubsection{Search user}
\textbf{Introduction:} Only the administrator can \emph{search for a user}. This page shows a form where the administrator 
is able to fill it, by entering a user's information for search. Then a table with all users matched to this search will 
be shown in the page.

\textbf{Implementation details:} The page is written in HTML. If the \emph{Submit Search} button is pressed the PHP file 
\emph{searchFriendUserTable.inc.php} will be called. This file calls the function \emph{searchFriend} of class ToServer 
so as to call the service which searches users, given their nick, name, surname, and/or country. Then it shows in a table 
all the users who were returned from the search. The administrator can make three actions: 
\begin{enumerate}
 \item See user's account and history of previous positions by pressing buttons \emph{Info} and \emph{History}, respectively. 
      These actions were described in \emph{Subsection \ref{showAllFUImplWeb}} and \emph{\ref{showAllFUImplWeb}}.
 \item Delete user's account by pressing button \emph{Delete}. After pressing this button the file \emph{deleteUser.inc.php} 
      will be called. This file just calls the function \emph{delUser} of class ToServer so as to call the service which 
      deletes a user. Then it shows an alert message that the user was deleted successfully.
\end{enumerate}

\textbf{Error Handling:}
\begin{enumerate}
\item If the administrator tries to delete a user and the deletion cannot be completed, because of error in the server, then 
      the system will show him an alert message that an error occurred.
\item If the server is not available the system will show an error message.
\end{enumerate}